<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Web实验室</title>
	</head>
	<!--百度统计-->
	<script>
		var _hmt = _hmt || [];
		(function() {
			var hm = document.createElement("script");
			hm.src = "https://hm.baidu.com/hm.js?04e828ac441acffeb4a6bc5698f79d55";
			var s = document.getElementsByTagName("script")[0];
			s.parentNode.insertBefore(hm, s);
		})();
	</script>

	<style>
		@charset "utf-8";

		* {
			margin: 0;
			padding: 0;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
			font-family: Microsoft Yahei, "微软雅黑", "Helvetica Neue", Helvetica, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif;
		}

		html,
		body {
			margin-top: 40px;
			width: 100%;
			height: 100%;
		}

		a {
			text-decoration: none;
		}

		a:focus {
			/* firefox */
			outline: none;
		}

		img {
			border: none;
		}

		.hidden {
			display: none;
		}

		/* 页面头部 */
		.header {
			width: 100%;
			height: 100%;
			position: relative;
			color: #fff;
			overflow: hidden;
		}

		/* 头部动画区域 */
		#victor-container {
			background: #666;
			z-index: -1;
			position: absolute;
			height: 100%;
			width: 100%;
			min-width: 500px;
		}

		#victor-output {
			width: 100%;
			height: 100%;
		}


		.welcome>p {
			font-size: 40px;
			margin-bottom: 20px;
			opacity: 0.8;
			-webkit-animation: dropIn 1s linear;
			animation: dropIn 1s linear;
		}

		/* 页面标题图 */
		.web-title {
			max-width: 90%;
			-webkit-animation: fadeIn 1s linear;
			animation: fadeIn 1s linear;
		}

		/*.web-title:hover {*/
		/*    -webkit-animation:bounce 1s .1s ease both;*/
		/*    -moz-animation:bounce 1s .1s ease both;*/
		/*}*/

		/* 向下滚动提示 */
		.scroll-down-tips {
			position: absolute;
			text-align: center;
			left: 50%;
			-webkit-transform: translateX(-50%);
			-moz-transform: translateX(-50%);
			-ms-transform: translateX(-50%);
			-o-transform: translateX(-50%);
			transform: translateX(-50%);
			bottom: 20px;
			color: #dcdcdc;
			cursor: pointer;
		}

		.scroll-down-tips>.fa {
			-webkit-animation: upDown 2s infinite;
			animation: upDown 2s infinite;
		}

		/* 页面主容器 */
		.container {

			max-width: 1100px;
			margin: 0 auto;
			position: relative;
		}

		/* 栅格系统 */
		.mk-item-box {
			margin-left: -15px;
			margin-right: -15px;
		}

		.mk-item-box:before,
		.mk-item-box:after {
			content: " ";
			display: table;
		}

		.mk-item-box:after {
			clear: both;
		}

		.mk-item {
			width: 25%;
			float: left;
			padding-left: 15px;
			padding-right: 15px;
			position: relative;
		}

		/* 响应式优化 */
		@media screen and (max-width: 1150px) {
			.container {
				width: 950px;
			}
		}

		@media screen and (max-width: 1000px) {
			.container {
				width: 750px;
			}

			.mk-item {
				width: 50%;
			}
		}

		@media screen and (max-width: 800px) {
			.container {
				width: 100%;
				padding-left: 30px;
				padding-right: 30px;
			}

			.welcome>p {
				font-size: 20px;
			}
		}

		@media screen and (max-width: 600px) {
			.container {
				padding-left: 15px;
				padding-right: 15px;
			}

			.mk-item {
				width: 100%;
			}
		}

		/* 分类大块 */
		.section {
			margin-top: 30px;
			margin-bottom: 10px;
		}

		/* 子标题 */
		.mk-sub-title {
			text-align: center;
			font-weight: normal;
			font-size: 26px;
			margin: 20px 0 13px 0;
		}

		.mk-sub-title>span {
			font-family: Segoe UI Light, Microsoft YaHei, Arial, Helvetica, sans-serif;
			margin-right: 10px;
		}

		.mk-title-describe {
			text-align: center;
			font-size: 16px;
			color: #666;
			margin-bottom: 20px;
		}

		/* 彩色块，样式来自 alloyteam(http://www.alloyteam.com/) */
		.mk-color-item {
			font-family: microsoft yahei;
			background-color: #70c3ff;
			padding: 20px 10px;
			text-align: center;
			border-radius: 4px;
			color: #fff;
			margin-bottom: 25px;
			-webkit-transition: all .3s ease;
			transition: all .3s ease;
			overflow: hidden;
			cursor: pointer;
			position: relative;
		}

		.mk-color-item:hover {
			transform: translateY(-6px);
			-webkit-transform: translateY(-6px);
			-moz-transform: translateY(-6px);
			box-shadow: 0 26px 40px -24px rgba(0, 36, 100, .5);
			-webkit-box-shadow: 0 26px 40px -24px rgba(0, 36, 100, .5);
			-moz-box-shadow: 0 26px 40px -24px rgba(0, 36, 100, .5)
		}

		.mk-color-item.color1 {
			background-color: #70c3ff !important;
		}

		.mk-color-item.color2 {
			background-color: #fd6a7f !important;
		}

		.mk-color-item.color3 {
			background-color: #7f8ea0 !important;
		}

		.mk-color-item.color4 {
			background-color: #89d04f !important;
		}

		.mk-color-item.color5 {
			background-color: #998899 !important;
		}

		.mk-color-item.color6 {
			background-color: #888069 !important;
		}

		.mk-color-item.color6 {
			background-color: #888069 !important;
		}

		.mk-color-item>p {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			font-size: 14px;
		}

		.mk-color-item>.item-logo {
			height: 60px;
			overflow: hidden;
			display: inline-block
		}

		.mk-color-item>.item-logo>img {
			height: 100%
		}

		.mk-color-item>.item-logo>.fa {
			font-size: 60px;
			line-height: 60px;
		}

		.mk-color-item>h3 {
			font-size: 24px;
			margin-top: 20px;
			margin-bottom: 10px;
			font-family: inherit;
			font-weight: 500;
			line-height: 1.1;
			color: inherit;
		}

		.mk-color-item>.light {
			cursor: pointer;
			position: absolute;
			left: -100%;
			top: 0;
			width: 100%;
			height: 100%;
			background-image: -webkit-linear-gradient(0deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, .5), hsla(0, 0%, 100%, 0));
			transform: skewx(-25deg);
			-o-transform: skewx(-25deg);
			-moz-transform: skewx(-25deg);
			-webkit-transform: skewx(-25deg);
		}

		.mk-color-item:hover>.light {
			-webkit-transition: all .3s ease;
			transition: all .3s ease;
			left: 100%
		}

		/* 大标题 */
		.mk-big-title {
			text-align: center;
		}

		.mk-big-title>h4 {
			font-size: 50px;
			display: inline-block;
			/*background: #eee url() repeat;  */
			/*text-shadow: 5px -5px black, 4px -4px white;  */
			/*font-weight: bold;  */
			/*-webkit-text-fill-color: transparent;  */
			/*-webkit-background-clip: text;*/
			position: relative;
			margin-bottom: 10px
		}

		/* 只有chrome才能享用的特效…… */
		@media screen and (-webkit-min-device-pixel-ratio:0) {
			.mk-big-title>h4 {
				background: #eee url() repeat;
				text-shadow: 5px -5px black, 4px -4px white;
				font-weight: bold;
				-webkit-text-fill-color: transparent;
				-webkit-background-clip: text;
			}
		}

		.about-content>p {
			text-indent: 2em;
			line-height: 25px;
			margin-bottom: 10px;
			color: #2d2d2d;
		}

		.about-content>p>a {
			color: #44a1a7;
		}

		.about-content>p>a:hover {
			text-decoration: underline;
		}

		/* 页脚区域 */
		.footer {
			margin-top: 30px;
			text-align: center;
			background: #26282c;
			padding: 30px 0 10px 0;
			color: hsla(0, 0%, 100%, .7);
		}

		/* 社会化图标 */
		.social {
			font-size: 60px;
			line-height: 60px;
			margin-bottom: 25px;
		}

		.social>a {
			color: #fff;
		}

		.footer>.count {
			cursor: pointer;
			display: inline;
		}

		.footer>.count>img {
			vertical-align: text-top;
			opacity: 0.6;
		}

		.footer>.count:hover>img {
			opacity: 1;
		}



		/* 上下移动动画效果 */
		@-webkit-keyframes upDown {
			0% {
				-webkit-transform: translate3d(0, 0, 0);
				opacity: 1;
			}

			100% {
				-webkit-transform: translate3d(0, 8px, 0);
				opacity: 0;
			}
		}

		@keyframes upDown {
			0% {
				transform: translate3d(0, 0, 0);
				opacity: 1;
			}

			100% {
				transform: translate3d(0, 8px, 0);
				opacity: 0;
			}
		}

		/* 掉落的动画效果 */
		@-webkit-keyframes dropIn {
			0% {
				opacity: 0;
				-webkit-transform: translate3d(0, -100px, 0)
			}

			100% {
				opacity: 0.8;
				-webkit-transform: translate3d(0, 0, 0)
			}
		}

		@keyframes dropIn {
			0% {
				opacity: 0;
				transform: translate3d(0, -100px, 0)
			}

			100% {
				opacity: 0.8;
				transform: translate3d(0, 0, 0)
			}
		}

		/* 逐渐出现的动画效果 */
		@-webkit-keyframes fadeIn {
			from {
				opacity: 0;
				-webkit-transform: scale(.8) translateY(20px)
			}

			to {
				opacity: 1;
				-webkit-transform: scale(1) translateY(0)
			}
		}

		@keyframes fadeIn {
			from {
				opacity: 0;
				transform: scale(.8) translateY(20px)
			}

			to {
				opacity: 1;
				transform: scale(1) translateY(0)
			}
		}

		/*弹动效果*/
		@-webkit-keyframes bounce {
			0% {
				-webkit-transform: scale(1)
			}

			10%,
			20% {
				-webkit-transform: scale(0.8) rotate(-2deg)
			}

			30%,
			50%,
			70%,
			90% {
				-webkit-transform: scale(1.1) rotate(2deg)
			}

			40%,
			60%,
			80% {
				-webkit-transform: scale(1.1) rotate(-2deg)
			}

			100% {
				-webkit-transform: scale(1) rotate(0)
			}
		}

		/* 拉伸弹动效果 */
		@keyframes rubberBand {
			0% {
				transform: scaleX(1)
			}

			30% {
				transform: scale3d(1.25, .75, 1)
			}

			40% {
				transform: scale3d(.75, 1.25, 1)
			}

			50% {
				transform: scale3d(1.15, .85, 1)
			}

			65% {
				transform: scale3d(.95, 1.05, 1)
			}

			75% {
				transform: scale3d(1.05, .95, 1)
			}

			to {
				transform: scaleX(1)
			}
		}

		nav {
			height: 60px;
			box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.43);
			position: fixed;
			width: 100%;
			top: 0;
			left: 0;
			background-color: rgba(255, 255, 255, 0.95);
			width: 100%;
			text-decoration: none;

			position: fixed;
			z-index: 200;

		}

		a {
			text-decoration: none;
			color: black;
			padding:35px;
		}

		#homepage {
			padding: 0 35px;
			line-height: 55px;
		}

		#blog {
			padding: 0 570px;
		}
	</style>
	<nav>
		<a href="/" id="homepage">Web实验室</a>
	</nav>
	<body>
		<div class="container">
			<section class="section">
				<a name="product"></a>
				<div class="mk-item-box">
					<div class="mk-item"></div>
					<div class="mk-item">
						<a href="/yzm" target="_blank">
							<article class="mk-color-item color1">
								<div class="item-logo">
									<img src="https://i.loli.net/2019/06/01/5cf1da60f252f20031.png" />
								</div>
								<h3>验证码DEMO</h3>
								<p>
									滑动式验证码
								</p>
								<i class="light"></i>
							</article>
						</a>
					</div>
					<!-- mk-item -->

					<div class="mk-item">
						<a href="/hao" target="_blank">
							<article class="mk-color-item color3">
								<div class="item-logo">
									<img src="https://i.loli.net/2019/06/01/5cf1db244eef047399.png" />
								</div>
								<h3>单页导航</h3>
								<p>
									开发者的导航
								</p>
								<i class="light"></i>
							</article>
						</a>
					</div>
					<div class="mk-item">
						<a href="/js" target="_blank">
							<article class="mk-color-item color4">
								<div class="item-logo">
									<img src="https://i.loli.net/2019/06/01/5cf1dc730308924206.png" />
								</div>
								<h3>图片墙</h3>
								<p>
									一堆乱七八糟的图片
								</p>
								<i class="light"></i>
							</article>
						</a>
					</div>
					<div class="mk-item">
						<a href="/jttl" target="_blank">
							<article class="mk-color-item color3">
								<div class="item-logo">
									<img src="https://i.loli.net/2019/06/01/5cf1e00436ea737169.png" />
								</div>
								<h3>鸡兔同笼</h3>
								<p>
									在线计算鸡兔同笼
								</p>
								<i class="light"></i>
							</article>
						</a>
					</div>
					<div class="mk-item">
						<a href="/js/jc.html" target="_blank">
							<article class="mk-color-item color6">
								<div class="item-logo">
									<img src="https://i.loli.net/2019/06/01/5cf1dd39cea3735125.png" />
								</div>
								<h3>屏幕检测</h3>
								<p>
									分辨率,高,宽......
								</p>
								<i class="light"></i>
							</article>
						</a>
					</div>
					<!-- mk-item -->
					<div class="mk-item">
						<a href="/mta" target="_blank">
							<article class="mk-color-item color2">
								<div class="item-logo">
									<img src="https://i.loli.net/2019/06/01/5cf1de662ebf071547.png" />
								</div>
								<h3>MTA实验室</h3>
								<p>
									各种测试......
								</p>
								<i class="light"></i>
							</article>
						</a>
					</div>
					<div class="mk-item">
						<a href="/jz" target="_blank">
							<article class="mk-color-item color3">
								<div class="item-logo">
									<img src="https://i.loli.net/2019/06/01/5cf1df5e67b5635012.png" />
								</div>
								<h3>剪纸生成器</h3>
								<p>
									真好看......
								</p>
								<i class="light"></i>
							</article>
						</a>
					</div>
					<div class="mk-item">
						<a href="/dw" target="_blank">
							<article class="mk-color-item color1">
								<div class="item-logo">
									<img src="https://i.loli.net/2019/06/27/5d144d7df19e588620.png" />
								</div>
								<h3>单位换算</h3>
								<p>
									只支持重量和面积哦
								</p>
								<i class="light"></i>
							</article>
						</a>
					</div>
					<div class="mk-item">
						<a href="/blog" target="_blank">
							<article class="mk-color-item color2">
								<div class="item-logo">
									<img src="https://i.loli.net/2019/06/08/5cfb0f986ce9738619.png" />
								</div>
								<h3>博客</h3>
								<p>
									一堆乱七八糟的记录......
								</p>
								<i class="light"></i>
							</article>
						</a>
					</div>
				</div>
			</section>
			<section class="section">
		</div>
		</section>
		<!--闲聊么-->
		<script>
			var xlm_wid = '14658';
			var xlm_url = 'https://www.xianliao.me/';
		</script>
		<script charset='UTF-8' src='https://www.xianliao.me/embed.js'></script>
	</body>
</html>
